<template>
  <div>
    <el-table
      :data="tableData"
      border
      stripe
      v-loading="loading"
      element-loading-text="数据加载中"
    >
      <el-table-column prop="businessName" label="店铺名称" align="center"></el-table-column>
      <el-table-column prop="legalRepresentativeName" label="法人名称" align="center"></el-table-column>
      <el-table-column prop="phoneNumber" label="商家手机号" align="center"></el-table-column>
      <el-table-column prop="merchantEmail" label="商家邮箱" align="center"></el-table-column>
      <el-table-column prop="businessActivities" label="经营范围与类别" align="center"></el-table-column>
      <el-table-column prop="registeredCapital" label="注册资本(万元)" align="center"></el-table-column>
      <el-table-column prop="idCardNumber" label="身份证号" align="center"></el-table-column>
      <el-table-column prop="registrationNumber" label="营业执照号码" align="center"></el-table-column>
      <el-table-column prop="registrationNumberDate" label="效期限" align="center"
                       :formatter="formatDate"
      ></el-table-column>
      <el-table-column prop="follow" label="关注数量" align="center"></el-table-column>
      <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
      <el-table-column prop="type" label="状态" align="center">
        <template slot-scope="scope">
      <span v-if="scope.row.type === '有效'" style="color: green;">
        <i class="el-icon-success"></i> 有效
      </span>
          <span v-else-if="scope.row.type === '已过期'" style="color: red;">
        <i class="el-icon-error"></i> 已过期
      </span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="160"
      >
        <template slot-scope="scope">
          <!--          <el-button @click="viewUser(scope.row)" type="text" size="small">查看商品</el-button>-->
          <el-button @click="viewInfoUser(scope.row)" type="text" size="small">查看商家详情</el-button>
          <el-button @click="deleteUser(scope.row)" type="text" size="small" class="text-danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align: right; margin-top: 20px;"
    >
    </el-pagination>

    <el-dialog
      :title="name"
      :visible.sync="centerDialogVisible"
      width="80%"
      center
    >
      <products :id="id"/>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="商家详情"
      :visible.sync="centerDialogVisible1"
      width="80%"
      :close-on-escape="false"
      center
    >
      <index :id="id"/>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible1 = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import { getMerchantSearch } from '@/api/list/products'
import Products from '@/views/list/products/products.vue'
import Address from '@/views/list/user/address.vue'
import Index from '@/views/list/merchan/index.vue'

export default {
  name: 'merchan',
  components: { Index, Address, Products },
  data() {
    return {
      // 商家数据
      tableData: [],
      total: 0,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
      currentTime: new Date().toLocaleString(),
      loginUser: 'admin',
      totalUserCount: '统计中...',
      centerDialogVisible: false,
      centerDialogVisible1: false,
      id: 0,
      name: null
    }
  },
  mounted() {
    this.merchantSearch()
  },
  methods: {
    viewInfoUser(row) {
      this.centerDialogVisible1 = true
      this.id = row.id
    },
    merchantSearch() {
      this.loading = true
      getMerchantSearch(this.queryParams)
        .then((response) => {
          this.tableData = response.rows || []
          this.total = response.total || 0
        })
        .catch((error) => {
          this.$message.error('获取商家列表失败')
        })
        .finally(() => {
          this.loading = false  // 请求结束，无论成功或失败都要隐藏加载
        })
    },
    handleSizeChange(size) {
      this.queryParams.pageNum = 1 // 切换页数时重置为第一页
      this.queryParams.pageSize = size
      this.search()
    },
    handleCurrentChange(page) {
      this.queryParams.pageNum = page // 更新当前页码
      this.search()
    },
    // 格式化日期
    formatDate(row, column, cellValue) {
      if (!cellValue) return ''
      const date = new Date(cellValue)
      const year = date.getFullYear()
      const month = ('0' + (date.getMonth() + 1)).slice(-2)
      const day = ('0' + date.getDate()).slice(-2)
      return `${year}-${month}-${day}`
    }
  }
}
</script>
<style scoped lang="scss">

</style>
